<template>
    <div class="app-container">
        <el-card class="box-card">

            <!-- 标签页 -->
            <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
                <el-tab-pane label="基本信息" name="basicInfo">
                    <el-form ref="shopinfoRef" :model="form" :rules="rules" label-width="120px" v-loading="loading">
                        <!-- 会员名称不可修改 -->
                        <el-divider content-position="left"
                            style="font-size: 18px; font-weight: bold;">基本信息</el-divider>
                        <el-form-item label="会员名称" prop="memberName">
                            <div style="display: flex; align-items: center;">
                                <el-input v-model="form.memberName" placeholder="请输入会员名称"
                                    :disabled="route.query.mode !== 'add'" disabled />
                                <el-button v-if="route.query.mode === 'add'" @click="showMemberDialog"
                                    style="margin-left: 10px;">选择会员</el-button>
                            </div>
                        </el-form-item>

                        <el-form-item label="店铺名称" prop="storeName">
                            <el-input v-model="form.storeName" placeholder="请输入店铺名称" />
                        </el-form-item>
                        <el-form-item label="是否自营" prop="isSelfOperated">
                            <!-- 变成单选框，默认根据form.isSelfOperated的值，如果为0，则选中自营，如果为1，则选中非自营 -->
                            <el-radio-group v-model="form.isSelfOperated" size="large">
                                <el-radio-button label="自营" :value="0" />
                                <el-radio-button label="非自营" :value="1" />
                            </el-radio-group>
                        </el-form-item>
                        <el-form-item label="店铺所在地" prop="storeLocation" disabled>
                            <div style="display: flex; align-items: center;">
                                <div style="width: 200px;">{{ form.storeLocation }}</div>
                                <el-cascader v-model="selectedArea" :options="regionData" :props="cascaderProps"
                                    @change="handleAreaChange" style="width: 100%" placeholder="请选择省市区" />
                            </div>
                        </el-form-item>
                        <el-form-item label="店铺详细地址" prop="storeAddress" disabled>
                            <el-input v-model="form.storeAddress" placeholder="请输入店铺详细地址" />
                        </el-form-item>
                        <el-form-item label="店铺logo" prop="storeLogo">
                            <image-upload v-model="form.storeLogo" :limit="1" :file-size="2"
                                :file-type="['jpg', 'jpeg', 'png']" :is-show-tip="true" />
                        </el-form-item>
                        <el-form-item label="店铺简介" prop="storeDescription" disabled>
                            <el-input v-model="form.storeDescription" type="textarea" :rows="3" placeholder="请输入店铺简介" />
                        </el-form-item>

                        <!-- 退货收件地址 -->
                        <el-divider content-position="left"
                            style="font-size: 18px; font-weight: bold;">退货收件地址</el-divider>
                        <el-form-item label="收货人姓名" prop="receiverName">
                            <el-input v-model="form.receiverName" placeholder="请输入收货人姓名" />
                        </el-form-item>
                        <el-form-item label="收件人手机号" prop="receiverPhone">
                            <el-input v-model="form.receiverPhone" placeholder="请输入收件人手机" />
                        </el-form-item>
                        <el-form-item label="地址信息" prop="receiverAddress">
                            <span>暂无地址</span>
                            <el-button style="margin-left: 10px;">选择</el-button>
                        </el-form-item>
                        <el-form-item label="详细地址" prop="receiverAddressDetail">
                            <el-input v-model="form.receiverAddressDetail" placeholder="请输入详细地址" />
                        </el-form-item>

                        <el-button @click="nextStep"
                            style="background-color: #FF5C58; color: white; border-color: #FF5C58;">下一步</el-button>
                    </el-form>
                </el-tab-pane>

                <el-tab-pane label="入驻信息" name="entryInfo">
                    <el-form ref="shopinfoRef" :model="form" :rules="rules" label-width="120px" v-loading="loading">
                        <!-- 公司信息 -->
                        <el-divider content-position="left"
                            style="font-size: 18px; font-weight: bold;">公司信息</el-divider>
                        <el-form-item label="公司名称" prop="companyName" disabled>
                            <el-input v-model="form.companyName" placeholder="请输入公司名称" />
                        </el-form-item>
                        <el-form-item label="公司电话" prop="companyPhone" disabled>
                            <el-input v-model="form.companyPhone" placeholder="请输入公司电话" />
                        </el-form-item>
                        <el-form-item label="公司所在地" prop="companyLocation" disabled>
                            <div style="display: flex; align-items: center;">
                                <div style="width: 200px;">{{ form.companyLocation }}</div>
                                <el-cascader v-model="selectedCompanyArea" :options="regionData" :props="cascaderProps"
                                    @change="handleCompanyAreaChange" style="width: 100%" placeholder="请选择省市区" />
                            </div>
                        </el-form-item>
                        <el-form-item label="公司实际地址" prop="companyAddress" disabled>
                            <el-input v-model="form.companyAddress" placeholder="请输入公司实际地址" />
                        </el-form-item>
                        <el-form-item label="员工总数" prop="employeeCount" disabled>
                            <el-input v-model="form.employeeCount" placeholder="请输入员工总数" />
                        </el-form-item>
                        <el-form-item label="注册资金" prop="registeredCapital" disabled>
                            <el-input v-model="form.registeredCapital" placeholder="请输入注册资金(万)" />
                            万
                        </el-form-item>
                        <el-form-item label="联系人姓名" prop="contactName" disabled>
                            <el-input v-model="form.contactName" placeholder="请输入联系人姓名" />
                        </el-form-item>
                        <el-form-item label="电子邮箱" prop="email" disabled>
                            <el-input v-model="form.email" placeholder="请输入电子邮箱" />
                        </el-form-item>

                        <el-row :gutter="20">
                            <el-col :span="12">
                                <el-form-item label="库存预警数" prop="stockWarningNum">
                                    <el-input v-model="form.stockWarningNum" placeholder="请输入库存预警数" />
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">
                            </el-col>
                        </el-row>

                        <!-- 营业执照信息 -->
                        <el-divider content-position="left"
                            style="font-size: 18px; font-weight: bold;">营业执照信息</el-divider>
                        <el-form-item label="营业执照号" prop="businessLicenseNo" disabled>
                            <el-input v-model="form.businessLicenseNo" placeholder="请输入营业执照号" />
                        </el-form-item>
                        <el-form-item label="法定经营范围" prop="businessScope" disabled>
                            <el-input v-model="form.businessScope" type="textarea" :rows="3" placeholder="请输入法定经营范围" />
                        </el-form-item>
                        <el-form-item label="营业执照电子版" prop="businessLicenseImage">
                            <image-upload v-model="form.businessLicenseImage" :limit="2" :file-size="3"
                                :file-type="['jpg', 'jpeg', 'png']" :is-show-tip="true" />
                        </el-form-item>

                        <!-- 法人信息 -->
                        <el-divider content-position="left"
                            style="font-size: 18px; font-weight: bold;">法人信息</el-divider>
                        <el-form-item label="法人姓名" prop="legalPersonName" disabled>
                            <el-input v-model="form.legalPersonName" placeholder="请输入法人姓名" />
                        </el-form-item>
                        <el-form-item label="法人证件号" prop="legalPersonId" disabled>
                            <el-input v-model="form.legalPersonId" placeholder="请输入法人证件号" />
                        </el-form-item>
                        <el-form-item label="身份证照片" prop="legalPersonIdPhoto">
                            <image-upload v-model="form.legalPersonIdPhoto" :limit="2" :file-size="3"
                                :file-type="['jpg', 'jpeg', 'png']" :is-show-tip="true" />
                            <div style="color: #999; font-size: 12px; margin-top: 5px;">
                                点击图片上传身份证正反面，要求身份证清晰，四角无缺漏
                            </div>
                        </el-form-item>

                        <!-- 结算银行信息 -->
                        <el-divider content-position="left"
                            style="font-size: 18px; font-weight: bold;">结算银行信息</el-divider>
                        <el-form-item label="结算银行开户名" prop="bankAccountName" disabled>
                            <el-input v-model="form.bankAccountName" placeholder="请输入结算银行开户名" />
                        </el-form-item>
                        <el-form-item label="结算银行账号" prop="bankAccountNumber" disabled>
                            <el-input v-model="form.bankAccountNumber" placeholder="请输入结算银行账号" />
                        </el-form-item>
                        <el-form-item label="银行支行名称" prop="bankBranchName" disabled>
                            <el-input v-model="form.bankBranchName" placeholder="请输入银行支行名称" />
                        </el-form-item>
                        <el-form-item label="支行联行号" prop="bankBranchCode" disabled>
                            <el-input v-model="form.bankBranchCode" placeholder="请输入支行联行号" />
                        </el-form-item>

                        <el-button @click="prevStep"
                            style="background-color: #FA6419; color: white; border-color: #FA6419;">上一步</el-button>
                        <el-button @click="nextStep"
                            style="background-color: #FF5C58; color: white; border-color: #FF5C58;">下一步</el-button>
                    </el-form>
                </el-tab-pane>

                <el-tab-pane label="经营范围" name="scope">
                    <el-form ref="shopinfoRef" :model="form" :rules="rules" label-width="120px" v-loading="loading">
                        <el-form-item label="经营范围" prop="scope">
                            <el-input v-model="form.scope" placeholder="请输入经营范围" />
                        </el-form-item>

                        <el-button @click="prevStep"
                            style="background-color: #FA6419; color: white; border-color: #FA6419;">上一步</el-button>
                        <el-button @click="nextStep"
                            style="background-color: #FF5C58; color: white; border-color: #FF5C58;">下一步</el-button>
                    </el-form>
                </el-tab-pane>

                <el-tab-pane label="结算信息" name="settlementInfo">
                    <el-form ref="shopinfoRef" :model="form" :rules="rules" label-width="120px" v-loading="loading">
                        <!-- 结算信息 -->
                        <div style="color: #666; margin-bottom: 20px;">
                            已添加{{ settlementDates.length }}个结算日，最多可添加5个结算日，当月不包含所设日期时，将会顺延到下一个结算日
                        </div>

                        <!-- 未确认状态 -->
                        <div v-if="!settlementConfirmed">
                            <el-form-item label="结算日期" prop="settlementDate">
                                <el-select v-model="settlementDateValue" placeholder="请选择结算日期" style="width: 240px">
                                    <el-option v-for="item in settlementOptions" :key="item.value" :label="item.label"
                                        :value="item.value" />
                                </el-select>
                                <el-button @click="confirmSettlement" style="margin-left: 10px;">确认</el-button>
                            </el-form-item>
                        </div>

                        <!-- 已确认状态 -->
                        <div v-if="settlementConfirmed">
                            <el-form-item label="结算日期">
                                <div style="margin-bottom: 15px;">
                                    <el-tag v-for="(date, index) in settlementDates" :key="index"
                                        style="margin-right: 10px; margin-bottom: 10px;" closable
                                        @close="removeSettlementDate(index)">
                                        {{ date }}号
                                    </el-tag>
                                </div>

                                <!-- 添加结算日期按钮 -->
                                <div v-if="settlementDates.length < 5">
                                    <el-button @click="showAddSettlementDialog">
                                        添加结算日期
                                    </el-button>
                                </div>
                            </el-form-item>
                        </div>

                        <el-button @click="prevStep"
                            style="background-color: #FA6419; color: white; border-color: #FA6419;">上一步</el-button>
                        <el-button @click="submitForm"
                            style="background-color: #FF5C58; color: white; border-color: #FF5C58;">{{ route.query.mode
                                === 'add' ? '添加' : '修改' }}</el-button>
                    </el-form>
                </el-tab-pane>
            </el-tabs>
        </el-card>

        <!-- 添加结算日期对话框 -->
        <el-dialog v-model="addSettlementDialogVisible" title="添加结算日期" width="400px">
            <el-form :model="addSettlementForm" label-width="100px">
                <el-form-item label="结算日期">
                    <el-select v-model="addSettlementForm.date" placeholder="请选择结算日期" style="width: 100%">
                        <el-option v-for="item in settlementOptions" :key="item.value" :label="item.label"
                            :value="item.value" />
                    </el-select>
                </el-form-item>
            </el-form>
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="addSettlementDialogVisible = false">取消</el-button>
                    <el-button type="primary" @click="addSettlementDate"
                        style="background-color: #67C23A; color: white; border-color: #67C23A;">
                        确认添加
                    </el-button>
                </span>
            </template>
        </el-dialog>

        <!-- 选择会员对话框 -->
        <el-dialog v-model="memberDialogVisible" title="选择会员" width="800px">
            <el-form :inline="true" :model="memberQueryParams" class="demo-form-inline">
                <el-form-item label="会员名称">
                    <el-input v-model="form.memberName" placeholder="请输入会员名称" :disabled="route.query.mode !== 'add'"
                        disabled />
                    <el-button v-if="route.query.mode === 'add'" @click="showMemberDialog"
                        style="margin-left: 10px;">选择会员</el-button>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="searchMembers">搜索</el-button>
                    <el-button @click="resetMemberQuery">重置</el-button>
                </el-form-item>
            </el-form>

            <el-table :data="memberList" @row-click="selectMember" style="cursor: pointer;">
                <el-table-column prop="memberName" label="会员名称" />
                <el-table-column prop="phone" label="手机号" />
                <el-table-column prop="email" label="邮箱" />
                <el-table-column prop="status" label="状态">
                    <template #default="scope">
                        <el-tag v-if="scope.row.status === 0" type="success">正常</el-tag>
                        <el-tag v-else-if="scope.row.status === 1" type="danger">禁用</el-tag>
                        <span v-else>{{ scope.row.status }}</span>
                    </template>
                </el-table-column>
            </el-table>

            <el-pagination v-if="memberTotal > 0" :total="memberTotal" v-model:current-page="memberQueryParams.pageNum"
                v-model:page-size="memberQueryParams.pageSize" @current-change="searchMembers"
                layout="total, prev, pager, next" />

            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="memberDialogVisible = false">取消</el-button>
                </span>
            </template>
        </el-dialog>
    </div>
</template>

<script setup name="ShopinfoDetail1">
import { getShopinfo, updateShopinfo, addShopinfo } from "@/api/dianpu/shopinfo"
import { regionData } from 'element-china-area-data'
const { proxy } = getCurrentInstance()
import { listUser } from "@/api/system/user"//会员
const route = useRoute()

const selectedArea = ref([])
const selectedCompanyArea = ref([])
const cascaderProps = ref({
    value: 'value',
    label: 'label',
    children: 'children'
})
console.log('区域数据:', JSON.stringify(regionData.slice(0, 2), null, 2));
const loading = ref(true)
const form = ref({})
const activeName = ref('basicInfo')
const settlementDateValue = ref(1)
const settlementDates = ref([])
const settlementConfirmed = ref(false)
const addSettlementDialogVisible = ref(false)
const addSettlementForm = ref({
    date: 1
})

// 会员选择相关
const memberDialogVisible = ref(false)
const memberList = ref([])
const memberTotal = ref(0)
const memberQueryParams = ref({
    pageNum: 1,
    pageSize: 10,
    memberName: ''
})



// 页面加载时获取详情
onMounted(() => {
    getShopDetail()
    console.log('区域数据:', JSON.stringify(regionData.slice(0, 2), null, 2));
})


/** 显示会员选择对话框 */
function showMemberDialog() {
    memberDialogVisible.value = true
    searchMembers()
}

/** 搜索会员 */
function searchMembers() {
    listUser(memberQueryParams.value).then(response => {
        memberList.value = response.rows
        memberTotal.value = response.total
    })
}

/** 重置会员查询 */
function resetMemberQuery() {
    memberQueryParams.value = {
        pageNum: 1,
        pageSize: 10,
        memberName: ''
    }
    searchMembers()
}

/** 选择会员 */
function selectMember(row) {
    form.value.memberName = row.userName
    memberDialogVisible.value = false
    proxy.$modal.msgSuccess("已选择会员：" + row.userName)
}

/** 地区选择变化处理 */
function handleAreaChange(value) {
    if (value && value.length > 0) {
        // 获取选中的地区名称
        const getAreaNames = (codes, data) => {
            const names = []
            let currentData = data
            for (let i = 0; i < codes.length; i++) {
                const code = codes[i]
                const found = currentData.find(item => item.value === code)
                if (found) {
                    names.push(found.label)
                    currentData = found.children || []
                }
            }
            return names.join(' ')
        }
        form.value.storeLocation = getAreaNames(value, regionData)
    } else {
        form.value.storeLocation = ''
    }
}



// 页面加载时获取详情
onMounted(() => {
    getShopDetail()
})



// 结算日期选项
const settlementOptions = ref([
    { value: 1, label: '1号' },
    { value: 2, label: '2号' },
    { value: 3, label: '3号' },
    { value: 4, label: '4号' },
    { value: 5, label: '5号' },
    { value: 6, label: '6号' },
    { value: 7, label: '7号' },
    { value: 8, label: '8号' },
    { value: 9, label: '9号' },
    { value: 10, label: '10号' },
    { value: 11, label: '11号' },
    { value: 12, label: '12号' },
    { value: 13, label: '13号' },
    { value: 14, label: '14号' },
    { value: 15, label: '15号' },
    { value: 16, label: '16号' },
    { value: 17, label: '17号' },
    { value: 18, label: '18号' },
    { value: 19, label: '19号' },
    { value: 20, label: '20号' },
    { value: 21, label: '21号' },
    { value: 22, label: '22号' },
    { value: 23, label: '23号' },
    { value: 24, label: '24号' },
    { value: 25, label: '25号' },
    { value: 26, label: '26号' },
    { value: 27, label: '27号' },
    { value: 28, label: '28号' },
    { value: 29, label: '29号' },
    { value: 30, label: '30号' },
    { value: 31, label: '31号' }
])

const rules = {
    memberName: [
        { required: true, message: "会员名称不能为空", trigger: "blur" }
    ],
    storeName: [
        { required: true, message: "店铺名称不能为空", trigger: "blur" }
    ],
    isSelfOperated: [
        { required: true, message: "是否自营不能为空", trigger: "blur" }
    ]
}

/** 获取店铺详情 */
function getShopDetail() {
    const id = route.params.id || route.query.id;
    const mode = route.query.mode;
    console.log('详情页面 - 接收到的ID参数:', id, '模式:', mode)

    // 如果是添加模式，不需要ID
    if (mode === 'add') {
        // 初始化空表单用于添加
        form.value = {
            memberName: '',
            storeName: '',
            isSelfOperated: 0, // 默认自营
            storeLocation: '',
            storeAddress: '',
            storeLogo: '',
            storeDescription: '',
            receiverName: '',
            receiverPhone: '',
            receiverAddressDetail: '',
            stockWarningNum: '',
            companyName: '',
            companyPhone: '',
            companyLocation: '',
            companyAddress: '',
            employeeCount: '',
            registeredCapital: '',
            contactName: '',
            email: '',
            businessLicenseNo: '',
            businessScope: '',
            businessLicenseImage: '',
            legalPersonName: '',
            legalPersonId: '',
            legalPersonIdPhoto: '',
            bankAccountName: '',
            bankAccountNumber: '',
            bankBranchName: '',
            bankBranchCode: '',
            settlementDate: '',
            scope: '',
            storeStatus: 0 // 默认开启中
        }
        loading.value = false
        return
    }

    // 修改模式需要ID
    if (!id) {
        proxy.$modal.msgError("店铺ID不能为空")
        goBack()
        return
    }

    loading.value = true
    getShopinfo(id).then(response => {
        form.value = response.data
        // 确保 isSelfOperated 有正确的值，并转换为数字类型
        if (form.value.isSelfOperated === undefined || form.value.isSelfOperated === null) {
            form.value.isSelfOperated = 0 // 默认自营
        } else {
            // 确保转换为数字类型
            form.value.isSelfOperated = parseInt(form.value.isSelfOperated)
        }

        // 调试图片数据格式
        console.log('=== 图片数据调试 ===')
        console.log('店铺logo数据:', form.value.storeLogo, '类型:', typeof form.value.storeLogo)
        console.log('营业执照图片:', form.value.businessLicenseImage, '类型:', typeof form.value.businessLicenseImage)
        console.log('身份证照片:', form.value.legalPersonIdPhoto, '类型:', typeof form.value.legalPersonIdPhoto)

        // 确保图片字段有正确的默认值
        form.value.storeLogo = form.value.storeLogo || ''
        form.value.businessLicenseImage = form.value.businessLicenseImage || ''
        form.value.legalPersonIdPhoto = form.value.legalPersonIdPhoto || ''

        // 调试信息
        console.log('获取到的店铺数据:', form.value)
        console.log('isSelfOperated 原始值:', response.data.isSelfOperated, '类型:', typeof response.data.isSelfOperated)
        console.log('转换后的值:', form.value.isSelfOperated, '类型:', typeof form.value.isSelfOperated)
        loading.value = false
    }).catch(() => {
        loading.value = false
        proxy.$modal.msgError("获取店铺详情失败")
        goBack()
    })
}

// 监听路由变化
watch(() => route.query.id, (newId) => {
    if (newId) {
        getShopDetail()
    }
})

/** 提交表单 */
function submitForm() {
    proxy.$refs["shopinfoRef"].validate(valid => {
        if (valid) {
            loading.value = true
            const mode = route.query.mode;

            if (mode === 'add') {
                // 添加模式
                addShopinfo(form.value).then(response => {
                    proxy.$modal.msgSuccess("添加成功")
                    loading.value = false
                    goBack()
                }).catch(() => {
                    loading.value = false
                    proxy.$modal.msgError("添加失败")
                })
            } else {
                // 修改模式
                updateShopinfo(form.value).then(response => {
                    proxy.$modal.msgSuccess("修改成功")
                    loading.value = false
                    goBack()
                }).catch(() => {
                    loading.value = false
                    proxy.$modal.msgError("修改失败")
                })
            }
        }
    })
}

/** 标签页点击处理 */
function handleClick(tab) {
    console.log('当前选中的标签页:', tab.props.name)
}

/** 下一步 */
function nextStep() {
    if (activeName.value === 'basicInfo') {
        activeName.value = 'entryInfo'
    } else if (activeName.value === 'entryInfo') {
        activeName.value = 'scope'
    } else if (activeName.value === 'scope') {
        activeName.value = 'settlementInfo'
    }
}

/** 上一步 */
function prevStep() {
    if (activeName.value === 'entryInfo') {
        activeName.value = 'basicInfo'
    } else if (activeName.value === 'scope') {
        activeName.value = 'entryInfo'
    } else if (activeName.value === 'settlementInfo') {
        activeName.value = 'scope'
    }
}

/** 确认结算日期 */
function confirmSettlement() {
    if (!settlementDateValue.value) {
        proxy.$modal.msgError("请选择结算日期")
        return
    }

    const date = settlementDateValue.value.toString()
    if (settlementDates.value.includes(date)) {
        proxy.$modal.msgError("该结算日期已存在")
        return
    }

    settlementDates.value.push(date)
    settlementConfirmed.value = true

    // 更新表单数据
    form.value.settlementDate = settlementDates.value.join(',')
}

/** 显示添加结算日期对话框 */
function showAddSettlementDialog() {
    addSettlementForm.value.date = 1
    addSettlementDialogVisible.value = true
}

/** 添加结算日期 */
function addSettlementDate() {
    if (!addSettlementForm.value.date) {
        proxy.$modal.msgError("请选择结算日期")
        return
    }

    const date = addSettlementForm.value.date.toString()
    if (settlementDates.value.includes(date)) {
        proxy.$modal.msgError("该结算日期已存在")
        return
    }

    if (settlementDates.value.length >= 5) {
        proxy.$modal.msgError("最多只能添加5个结算日期")
        return
    }

    settlementDates.value.push(date)
    addSettlementDialogVisible.value = false

    // 更新表单数据
    form.value.settlementDate = settlementDates.value.join(',')
}

/** 移除结算日期 */
function removeSettlementDate(index) {
    settlementDates.value.splice(index, 1)
    // 更新表单数据
    form.value.settlementDate = settlementDates.value.join(',')
}

/** 返回列表页 */
function goBack() {
    const id = route.query.id
    const mode = route.query.mode

    // 如果是修改模式且有ID，跳转到详情查看页面
    if (mode !== 'add' && id) {
        proxy.$router.push({
            path: '/dianpu/shopinfo/detail',
            query: { id: id }
        })
    } else {
        // 添加模式或没有ID时，返回列表页
        proxy.$router.push('/dianpu/shopinfo')
    }
}

// 页面加载时获取详情
onMounted(() => {
    getShopDetail()
})
</script>

<style scoped>
.card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.box-card {
    margin: 20px;
}

.demo-tabs .el-tabs__item.is-active {
    color: #ff0000;
}

.demo-tabs .el-tabs__active-bar {
    background-color: #ff0000;
}

/* 优化图片上传组件样式 */
:deep(.el-upload-list--picture-card) {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
}

:deep(.el-upload--picture-card) {
    width: 120px;
    height: 120px;
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: all 0.3s;
}

:deep(.el-upload--picture-card:hover) {
    border-color: #409eff;
}

:deep(.el-upload-list__item) {
    width: 120px;
    height: 120px;
    margin: 0 8px 8px 0;
    border: 1px solid #c0ccda;
    border-radius: 6px;
}

/* 确保图片完整显示 */
:deep(.el-upload-list__item img) {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
</style>
